<template>
  <div>
    <div v-title>我的推荐</div>
    <van-tabs :active="active" @click="tabel">
      <van-tab v-for="(index,j) in toplist" :title="index" :key="j">
      </van-tab>
    </van-tabs>
    <div class="left" v-bind:class="{ clickyes: isActiveA }">({{InforA}})</div>
    <div class="right" v-bind:class="{ clickyes: isActiveB }">({{InforB}})</div>
    <van-loading type="spinner" color="black" style="margin:54px auto" v-show="showLoading" />
    <div class="main" v-show="showmain">
      <ul class="accountList" v-waterfall-lower="loadMoreA" waterfall-disabled="disabledA" waterfall-offset="100" v-show="!showLoading">
        <div v-for="(item,index) in datalistone" :key="index">
          <div class="mainleft">
            <p v-if="item.Account!=null && item.Account!=''">{{item.Account.slice(0,3)}}****{{item.Account.slice(7,11)}}
              <span v-show="item.Account!=null && item.Account!=''">
                <img src="../image/Bindings.png">
              </span>
            </p>
            <p v-else>{{item.NickName}}</p>
            <p>{{item.RegistrTime}}</p>
          </div>
          <div class="Identity"><img src="../image/Gold.png" v-show="item.AgentLevel==2"><img src="../image/Silver.png" v-show="item.AgentLevel==1"></div>
          <div class="mainright">推荐奖励：{{item.EarningsAmount}}元</div>
        </div>
      </ul>
    </div>
    <div class="main" v-show="!showmain">
      <ul class="accountList" v-waterfall-lower="loadMoreB" waterfall-disabled="disabledB" waterfall-offset="100" v-show="!showLoading">
        <div v-for="(i,j) in datalisttwo" :key="j">
          <div class="mainleft">
            <p v-if="i.Account!=null && i.Account!=''">{{i.Account.slice(0,3)}}****{{i.Account.slice(7,11)}}
              <span v-show="i.Account!=null && i.Account!=''">
                <img src="../image/Bindings.png">
              </span>
            </p>
            <p v-else>{{i.NickName}}</p>
            <p>{{i.RegistrTime}}</p>
          </div>
          <div class="Identity"><img src="../image/Gold.png" v-show="i.AgentLevel==2"><img src="../image/Silver.png" v-show="i.AgentLevel==1"></div>
          <div class="mainright">推荐奖励：{{i.EarningsAmount}}元</div>
        </div>
      </ul>
    </div>
    <div class="nodata" v-show="this.showtimeA==0 &&!showLoading">
      <img src="../image/nodata.png">
    </div>
    <div class="nodata" v-show="this.showtimeB==0 &&!showLoading">
      <img src="../image/nodata.png">
    </div>
  </div>
</template>
<script>
import {
  Tab,
  Tabs,
  Toast,
  Waterfall,
  Loading,
} from 'vant';
import api from '../fetch/api.js';
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Toast.name]: Toast,
    [Loading.name]: Loading,
  },
  directives: {
    WaterfallLower: Waterfall('lower'),
  },
  data() {
    return {
      toplist: ['一级推荐', '二级推荐'],
      active: 0,
      datalistone: '',
      datalisttwo: '',
      InforA: '',
      InforB: '',
      isActiveA: true,
      isActiveB: false,
      pageA: 1,
      pageB: 1,
      showmain: true,
      showtimeA: '',
      showtimeB: 1,
      showLoading: true,
    }
  },
  created() {
    this.AllNumber()
    this.GetFirstEarningsDetail()
  },
  methods: {
    tabel(index) {
      if (index == 0) {
        this.TypeID = 1;
        this.isActiveA = true
        this.isActiveB = false
        this.pageA = 1
        this.datalistone = ''
        this.showmain = true
        this.showtimeB = 1
        this.GetFirstEarningsDetail()
      } else {
        this.TypeID = 0;
        this.isActiveA = false
        this.isActiveB = true
        this.pageB = 1
        this.datalisttwo = ''
        this.showmain = false
        this.showtimeA = 1
        this.GetSecondEarningsDetail()
      }
    },
    AllNumber() {
      api.Post('Member/MemberInfo/AllNumber', {}).then(res => {
        this.InforA = res.Infor.split(',')[0]
        this.InforB = res.Infor.split(',')[1]
      })
    },
    GetFirstEarningsDetail() {
      api.Post('Member/MemberInfo/GetFirstEarningsDetail', {
        Page: 1,
        Rows: 10
      }).then(res => {
        this.datalistone = res.rows
        this.showtimeA = res.total
        this.showLoading = false
      })
    },
    //加载更多
    loadMoreA() {
      this.disabledA = true;
      if (this.pageA * 10 >= this.showtimeA) {
        this.disabledA = false;
        return;
      }
      this.pageA++;
      console.log(this.pageA)
      api.Post('Member/MemberInfo/GetFirstEarningsDetail', {
        rows: 10,
        page: this.pageA
      }).then(res => {
        setTimeout(() => {
          for (var i = 0; i < res.rows.length; i++) {
            this.datalistone.push({
              Account: res.rows[i].Account,
              RegistrTime: res.rows[i].RegistrTime,
              EarningsAmount: res.rows[i].EarningsAmount,
              NickName: res.rows[i].NickName,
              AgentLevel: res.rows[i].AgentLevel,
            })
          }
        });
        this.disabledA = false;
      }, 200)
    },
    GetSecondEarningsDetail() {
      api.Post('Member/MemberInfo/GetSecondEarningsDetail', {
        Page: 1,
        Rows: 10
      }).then(res => {
        this.showtimeB = res.total
        this.datalisttwo = res.rows
        this.showLoading = false
      })
    },
    //加载更多
    loadMoreB() {
      this.disabledB = true;
      if (this.pageB * 10 >= this.showtimeB) {
        this.disabledB = false;
        return;
      }
      this.pageB++;
      api.Post('Member/MemberInfo/GetSecondEarningsDetail', {
        rows: 10,
        page: this.pageB
      }).then(res => {
        setTimeout(() => {
          for (var i = 0; i < res.rows.length; i++) {
            this.datalisttwo.push({
              Account: res.rows[i].Account,
              RegistrTime: res.rows[i].RegistrTime,
              EarningsAmount: res.rows[i].EarningsAmount,
              NickName: res.rows[i].NickName,
              AgentLevel: res.rows[i].AgentLevel,
            })
          }
        });
        this.disabledB = false;
      }, 200)
    },
  },

}

</script>
<style>
.van-tab--active {
  color: #2491ff
}

.van-tabs__nav-bar {
  background-color: #2491ff
}
</style>
<style scoped>
.clickyes {
  color: #2491ff !important;
}

p {
  margin: 0px;
}

.left {
  position: absolute;
  left: 34%;
  top: 12px;
  z-index: 999;
  font-size: 14px;
  color: #666666;
}

.right {
  position: absolute;
  left: 84%;
  top: 12px;
  z-index: 999;
  font-size: 14px;
  color: #666666;
}

.main {
  width: 100%;
  background: #fff;
}

.main>ul>div {
  width: 90%;
  margin: 0px auto;
  border-bottom: 1px solid #eeeeee;
  overflow: hidden;
}

.mainleft {
  padding-top: 12px;
  float: left;
  width: 60%;
}

.mainleft p:first-child {
  font-size: 14px;
  color: #333333;
}

.mainleft p:first-child img {
  width: 30%;
  margin-left: 5%;
}

.mainleft p:last-child {
  font-size: 12px;
  color: #999999;
  padding-top: 8px;
  padding-bottom: 12px;
}

.mainright {
  float: right;
  font-size: 14px;
  color: #333333;
  height: 68px;
  line-height: 68px;
  text-align: right;
}

.nodata {
  text-align: center;
  padding: 50px;
  margin-top: 20vw;
}

.nodata img {
  width: 45%;
}

.Identity {
  position: relative;
}

.Identity img {
  width: 18%;
  position: absolute;
  left: 50%;
  top: 15px;
}
</style>
